<template>
  <div class="container">
    <img src="../../src/assets/header.png" class="header">
    <div class="content">
      <router-view></router-view>
    </div>

    <div class="bottom">
      <!-- 字典维护按钮 -->
      <div :class="{ 'footer-item': true, 'active': activeIndex === 0 }" @click="handleClick(0)">
        <img :src="activeIndex === 0
          ? require('../assets/button/active.png')
          : require('../assets/button/normal.png')" class="footer-img" />
        <div @click="toPath('/dictionary')" class="footer-text">
          字典维护
        </div>
      </div>
      <!-- 实时监控按钮 -->
      <div :class="{ 'footer-item': true, 'active': activeIndex === 1 }" @click="handleClick(1)">
        <img :src="activeIndex === 1
          ? require('../assets/button/active.png')
          : require('../assets/button/normal.png')" class="footer-img" />
        <div @click="toPath('/cesium')" class="footer-text">
          实时监控
        </div>
      </div>
      <!-- 历史回放按钮 -->
      <div :class="{ 'footer-item': true, 'active': activeIndex === 2 }" @click="handleClick(2)">
        <img :src="activeIndex === 2
          ? require('../assets/button/active.png')
          : require('../assets/button/normal.png')" class="footer-img" />
        <div @click="toPath('/history')" class="footer-text">
          历史回放
        </div>
      </div>
    </div>

    <img src="../../src/assets/footer.png" class="footer">
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTitle: '',
      activeIndex: 1, // 默认选中"实时监控"
    };
  },
  mounted() {
    this.$router.afterEach(() => {
      const currentPath = this.$route.path;
      const paths = ['/dictionary', '/cesium', '/history'];
      this.activeIndex = paths.indexOf(currentPath);
    });
  },
  methods: {
    toPath(path) {
      this.$router.push(path);
    },
    handleClick(index) {
      this.activeIndex = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  width: 100%;
  position: relative;

  .header {
    width: 100%;
    height: 45px;
    z-index: 99;
    position: absolute;
    top: 0;
    left: 0;
  }

  .content {
    height: 100%;
  }

  .footer {
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 9;
  }

  .bottom {
    position: absolute;
    bottom: 25px;
    left: 40%;
    display: flex;

    .footer-item {
      margin-top: 10px;
      margin: 0 20px;
      display: flex;
      flex-direction: column;

      &.active {
        .footer-text {
          color: #00f0ff;
          font-weight: bold;
        }
      }

      &:hover {
        .footer-img {
          animation: float 3s ease-in-out infinite;
        }
      }

      .footer-img {
        width: 60px;
        height: 60px;
        transition: all 0.3s;
      }

      .footer-text {
        margin-top: 5px;
        color: white;
        font-size: 16px;
        transition: all 0.3s;

        &:hover {
          transform: translateY(-3px);
        }
      }
    }
  }
}

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }

  100% {
    transform: translateY(0);
  }
}
</style>